<template>
  <div id="pageContent">
    <v-container grid-list-md>
      <v-layout row wrap>
        <v-flex xs12 md8>
          <transition name="animated-transition" enter-active-class="animated fadeIn">
            <router-view></router-view>
          </transition>
        </v-flex>
        <v-flex md4 class="hidden-sm-and-down">
          <v-card class="mb-3">
            <v-img src="https://placem.at/places?w=500&h=300" height="128" aspect-ratio="2">
              <v-container fill-height fluid>
                <v-layout fill-height>
                  <v-flex xs12 align-end flexbox>
                    <!-- <span class="headline">Top 10 Australian beaches</span> -->
                    <v-avatar size="54" class="elevation-6 mr-3">
                      <img :src="app_admin_avatar" :alt="app_admin_name">
                    </v-avatar>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-img>
            <v-card-title primary-title>
              <div class="flex">
                <div>
                  <div class="headline">{{ app_admin_name }}</div>
                  <span class="grey--text">{{ app_admin_info }}</span>
                </div>
              </div>
            </v-card-title>
            <v-card-text class="pt-0">{{ app_admin_bio }}</v-card-text>
          </v-card>
          <v-widget title="热门文章" contentBg="white" class="mb-3">
            <div slot="widget-content">
              <v-list dense>
                <template v-for="article in topArtices">
                  <v-list-tile :key="article.id">
                    <v-list-tile-content>
                      <v-list-tile-title>
                        <v-icon small>far fa-hand-point-right</v-icon>
                        &nbsp;&nbsp;{{ article.title}}
                      </v-list-tile-title>
                    </v-list-tile-content>
                  </v-list-tile>
                </template>
              </v-list>
            </div>
          </v-widget>
          <v-widget title="标签云" contentBg="white" class="mb-3">
            <div slot="widget-content">
              <v-btn
                v-for="tag in tags"
                :key="tag.name"
                small
                :dark="tag.color ? true : false"
                :color="tag.color ? tag.color :`white`"
                :to="{ name:'tag',params:{id:tag.id}}"
                round
              >
                <v-icon small v-if="tag.icon">{{ tag.icon }}</v-icon>
                {{ tag.name }}
              </v-btn>
            </div>
          </v-widget>
          <v-widget title="友情链接" contentBg="white" class="mb-3">
            <div slot="widget-content">
              <v-btn
                v-for="link in links"
                :key="link.id"
                :href="link.direct"
                depressed
                small
              >{{ link.name }}</v-btn>
            </div>
          </v-widget>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>
<script>
import VWidget from '@/components/VWidget'
import { getAllLinks } from '@/api/resource/links'
import { getAllTags } from '@/api/resource/tags'
import { mapState } from 'vuex'
export default {
  name: 'app-content',
  components: { VWidget },
  data: () => ({
    topArtices: [],
    tags: [],
    links: []
  }),
  computed: {
    ...mapState({
      app_admin_name: state => state.app.app_admin_name,
      app_admin_info: state => state.app.app_admin_info,
      app_admin_bio: state => state.app.app_admin_bio,
      app_admin_avatar: state => state.app.app_admin_avatar
    })
  },
  methods: {
    init () {
      let _this = this
      getAllLinks().then(res => {
        _this.links = res.data
      })
      getAllTags().then(res => {
        _this.tags = res.data
      })
    }
  },

  created () {
    this.init()
  }
}
</script>
